/**
* @Description:附件在线多文件预览组件，可根据需求扩展
* @author NewLore1
* @Date 2024-6-4 21:04:49
* @LastEditors: qpw,lpj
* @LastEditTime: 2024-6-13 10:24:12
* 引用pdf,excel,word文档地址：https://www.npmjs.com/package/@vue-office/docx
**/
<template>
  <div v-if="previewVisible">
    <el-dialog
      class="index-more"
      :title="isMenu ? '预览更多' : '文件预览'"
      :footer="null"
      :before-close="handleCancel"
      :visible.sync="show"
      width="80%"
      top="5vh"
    >
      <el-row :gutter="16">
        <el-col :span="6" v-if="isMenu">
          <div class="pop-content-q">
            <div
              class="item-class"
              :class="item.url == itemView.url ? 'active' : ''"
              v-for="(item, index) in fileList"
              :key="index"
              @click="clickFileItem(item)"
            >
              {{ item.name }}
            </div>
          </div>
        </el-col>
        <el-col :span="isMenu ? 18 : 24">
          <div class="pop-content-q">
            <!-- 图片 -->
            <div v-if="itemView.fileType == 1" class="audio-mp3">
              <img alt="example" style="width: 100%" :src="itemView.url" />
            </div>

            <!-- 音频 -->
            <div v-else-if="itemView.fileType == 2" class="audio-mp3">
              <audio controls ref="audio" class="aud">
                <source :src="itemView.url" />
              </audio>
            </div>

            <!-- docx文档 -->
            <vue-office-docx
              v-else-if="itemView.fileType == 4"
              style="height: 100vh"
              :src="itemView.url"
              @rendered="rendered"
              @error="errorHandler"
            />

            <!-- excel文档 -->
            <vue-office-excel
              v-else-if="itemView.fileType == 5"
              style="height: 100vh"
              :src="itemView.url"
              @rendered="rendered"
              @error="errorHandler"
            />

            <!-- pdf-->
            <VueOfficePdf
              v-else-if="itemView.fileType == 6"
              :src="itemView.url"
              style="height: 100vh"
              @rendered="rendered"
              @error="errorHandler"
            />

            <div v-else class="audio-mp3">该文件不可预览</div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
//引入相关样式
import "@vue-office/excel/lib/index.css";
export default {
  name: "previewFilesMore",
  components: {
    VueOfficeExcel,
    VueOfficeDocx,
    VueOfficePdf,
  },
  props: {
    processId: {
      type: String,
      default: "",
    },
    // fileStr: {
    //   //文件
    //   type: String,
    //   default: "",
    // },
    fileArr: {
      // 多文件
      type: [Array,Object],
       default: () =>[],
    },
    isMenuShow: {
      //是否显示菜单
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: true,
      isMenu: this.isMenuShow,
      previewVisible: true, //是否显示
      previewFile: "", //文件
      fileType: "", //文件类型
      fileList: [],
      itemView: {},
    };
  },
  mounted() {
    // this.check(this.fileStr);
    this.checkMore(this.fileArr);
  },

  methods: {
    rendered() {
      console.log("渲染完成");
    },
    errorHandler() {
      console.log("渲染失败");
    },
    clickFileItem(item) {
      this.itemView = item;
    },
    //关闭弹窗
    handleCancel() {
      console.log("关闭弹窗");
      this.previewVisible = false;
      this.previewFile = "";
      this.$emit("updatevisible");
    },
    // 预览多文件
    checkMore(arr) {
      console.log("arr", arr);
      if (arr && arr.length > 0) {
        arr.forEach((item) => {
          item["fileType"] = this.check(item.url);
        });
        console.log("arr", arr);
        this.fileList = arr;
        this.itemView = arr[0];
      }
    },
    //预览
    check(item) {
      let fileType;
      // this.previewFile = item;
      if (
        this.getFileType(item) === "jpg" ||
        this.getFileType(item) === "png" ||
        this.getFileType(item) === "gif"
      ) {
        fileType = 1;
        console.log("图片");
      } else if (this.getFileType(item) === "mp3") {
        console.log("音频");
        fileType = 2;
      } else if (this.getFileType(item) === "mp4") {
        fileType = 3;
      } else if (
        this.getFileType(item) === "doc" ||
        this.getFileType(item) === "docx"
      ) {
        fileType = 4;
      } else if (
        this.getFileType(item) === "xls" ||
        this.getFileType(item) === "xlsx"
      ) {
        console.log("xls文档文件");
        fileType = 5;
        // let viewStr = `https://view.officeapps.live.com/op/view.aspx?src=${item}`;
        // console.log('文档文件viewStr:', viewStr);
        // this.previewFile = viewStr;
      } else if (this.getFileType(item) === "pdf") {
        fileType = 6;
        // this.previewFile = item;
      } else if (
        this.getFileType(item) === "7z" ||
        this.getFileType(item) === "zip" ||
        this.getFileType(item) === "rar"
      ) {
        console.log("压缩文件");
        fileType = 7;
        //checkFile = '该文件不可预览';
      } else {
        console.log("其他文件");
        fileType = 7;
      }
      // console.log('预览fileType:', this.fileType);
      // this.previewVisible = true;
      return fileType;
    },
    // 获取文件格式
    getFileType(val) {
      const list = val.split(".");
      const type = list[list.length - 1];
      return type.toLowerCase();
    },
  },
};
</script>
<style lang="scss">
.pop-content-q {
  min-height: 70vh;
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 4px;
}

.item-class {
  box-sizing: border-box;
  padding: 10px;
  cursor: pointer;
  margin-bottom: 4px;
  word-break: break-all;
}

.active {
  color: #409eff;
  background-color: #f5f7fa;
}

.item-class:hover {
  color: #409eff;
  background-color: #f5f7fa;
}

.audio-mp3 {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
